import React, { Component } from 'react'
import './index.css';
import axios from 'axios';

export default class DouYinList extends Component {
    state = {
        videos: []
    }
    render() {
        return (
            <div className="douyin-container">
                <h2>抖音热门视频</h2>
                <hr />
                <div className="row">
                    {this.state.videos.map(item => {
                        return <div className="col-xs-3" key={item.id}>
                                    <div className="img">
                                        <img className="img-responsive" src={item.cover} alt="" />
                                    </div>
                                    <h5>{item.desc}</h5>
                                </div>
                    })}
                    
                </div>
            </div>
        )
    }

    //组件挂载完毕 钩子
    async componentDidMount(){
        let {data} = await axios('http://api.xiaohigh.com:8090/douyin?_skip=20&_limit=20');

        this.setState({
            videos: data
        })
    }   
}
